<template>
  <div class="business-item-form-configure w-full h-full display-flex-column" style="overflow: hidden">
    <div class="btn-box display-flex" style="justify-content: flex-start">
      <a-button type="primary" class="m-r-sm" @click="handlerCreate">新建</a-button>
      <a-button type="primary m-r-sm" @click="loadData">刷新</a-button>
      <div class="btn-selector display-flex">
        <div class="selector-name m-r-xs">流程类型:</div>
        <a-select
          class="selector-item"
          style="width: 150px"
        >
          <a-select-option value="common">通用流程</a-select-option>
          <a-select-option value="ext">延期/变更</a-select-option>
          <a-select-option value="des">注销</a-select-option>
        </a-select>
      </div>
      <div class="h-full flex-1"></div>
      <div class="btn-right-box display-flex" style="justify-content: flex-start">
        <div class="btn-selector display-flex m-r-sm">
          <div class="selector-name m-r-xs">业务类型:</div>
          <a-select
            class="selector-item"
            style="width: 280px"
          >
            <a-select-option v-for="item in businessTypeList" :key="item.id" :value="item.id">
              {{ `${item.item_name}(${item.businessName})` }}
            </a-select-option>
          </a-select>
        </div>
      </div>
    </div>
    <div class="table-box flex-1" style="overflow: hidden">
      <a-table
        class="dist-box-table"
        bordered
        :rowClassName="setRowClassName"
        :customRow="customRow"
        :loading="table.loading"
        :rowKey="(record, index)=>index"
        :columns="table.columns"
        :data-source="table.dataSource"
        :pagination="table.pagination"
      >
        <template slot="index" slot-scope="text,record,index">
          <div>{{ index + 1 }}</div>
        </template>
        <span slot="operate" slot-scope="text,record">
          <div class="display-flex">
            <a-button type="default" @click="handlerEdit(record)">
              编辑
            </a-button>
            <a-button class="m-l-md" type="danger" @click="handlerRemove(record)">
              删除
            </a-button>
          </div>
        </span>
      </a-table>
    </div>
  </div>
</template>
<script>
import PageInitFn from '@/api/pageInitFn'
import mockApi from '@/api/demo/mockApi'

export default {
  name: 'ProjectList',
  props: {},
  data () {
    return {
      table: {
        columns: [],
        dataSource: [],
        loading: false,
        rowSelection: {
          selectedRowKeys: [],
          selectedRows: [],
          onChange: (selectedRowKeys, selectedRows) => {
            this.table.rowSelection.selectedRowKeys = selectedRowKeys
            this.table.rowSelection.selectedRows = selectedRows
          }
        },
        businessTypeList: [],
        pagination: {
          pageSize: 10,
          total: 0,
          current: 1,
          showSizeChanger: true, // 显示可改变每页数量
          pageSizeOptions: ['10', '20', '50', '100', '200', '500'], // 每页数量选项
          showTotal: (total) => `共${total}条数据`, // 显示总数
          onShowSizeChange: (current, pageSize) => {
            this.filter.pageIndex = 1
            this.filter.pageSize = pageSize
            this.table.pagination.pageSize = pageSize
            this.loadData(this.filterText)
          },
          onChange: (current, pageSize) => {
            this.filter.pageIndex = current
            this.filter.pageSize = pageSize
            this.table.pagination.current = current
            this.table.pagination.pageSize = pageSize
            this.loadData(this.filterText)
          }
        }
      },
      filter: {
        pageIndex: 1,
        pageSize: 10
      }
    }
  },
  created () {
    this.pageInitFn = new PageInitFn(this)
    this.pageInitFn.created()
  },
  async mounted () {
    await this.getSelectOption()
    await this.pageInitFn.mounted()
  },
  methods: {
    handlerCreate () {
      console.log('新建')
    },
    handlerEdit (record) {
      console.log('编辑')
    },
    handlerRemove (record) {
      console.log('删除')
    },
    async getSelectOption () {
      this.businessTypeList = await mockApi.getSelectOption()
    },
    setRowClassName (record, index) {
      return this.pageInitFn.setRowClassName(record, 'ID')
    },
    customRow (record, index, key) {
      return this.pageInitFn.customRow(record, 'ID')
    },
    async loadData (filterText = null) {
      this.filterText = filterText
      await this.pageInitFn.loadData({
        sqlConfigName: 'getBusinessItemForm'
      })
    }
  }
}
</script>

<style scoped lang="less">
.business-item-form-configure {
  background-color: white;
  padding: 10px;
}

.table-box {
  margin-top: 10px;
}
</style>
